import React, { useState, useCallback } from "react";
import { withUserStore } from "../../store/user";
import { Button, Input } from "antd";
import { login } from "../../api/User";
import "../../style/login.scss";
function Login({ userStore: { loginActions }, history }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  let loginAction = useCallback(async () => {
    if (username === "" || password === "") {
      alert("输入账号密码");
      return;
    }
    let res = await login({ username, password });
    console.log(res.data);
    localStorage.setItem("token", res.data.token);
    loginActions(res.data.token);
    history.replace("/");
  }, [password, username, history, loginActions]);
  return (
    <div className="box">
      <h1>生鲜电商-后台系统</h1>
      <Input
        className="input"
        placeholder="请输入账号"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <Input.Password
        className="input"
        placeholder="请输入密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <Button onClick={() => loginAction()}>登录</Button>
    </div>
  );
}

export default withUserStore(Login);
